<template>
  <el-card class="classify" shadow="never">
    <el-form :inline="true" :model="queryData" class="demo-form-inline">
      <el-form-item label="类型">
        <el-select v-model="queryData.type" filterable>
          <el-option label="全部" value="" />
          <el-option label="求职招聘" value="1" />
          <el-option label="婚恋交友" value="5" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryData.state" filterable>
          <el-option label="全部" value="" />
          <el-option label="启用" value="0" />
          <el-option label="关闭" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="queryData.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item>
          <el-button :loading="tableLoading" @click="queryHandler">查询</el-button>
        <el-button type="primary" @click="addHandler">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="tableLoading" :data="tableData" stripe>
      <el-table-column type="index" label="编号" width="50" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="type_name" label="类型" />
      <el-table-column prop="pic" label="图片">
        <template slot-scope="{ row }">
          <el-image
            v-if="row.pic"
            style="width: 50px; height: 50px"
            :src="row.pic"
            :preview-src-list="[row.pic]"
          />
          <span v-else>暂无图片</span>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="URL" />
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === '0'">启用</el-tag>
          <el-tag v-else type="warning">关闭</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sortv" label="排序数(数字越大越靠前)" />
      <el-table-column prop="dateline" label="创建时间" />
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" size="small" style="margin-right:10px" @click="editHandler(scope.row)">编辑 </el-button>
          <el-popconfirm
            :title="`您确定${(scope.row.state === '1' ? '启用' : '关闭')}？`"
            @onConfirm="toggleHandler(scope.row)"
          >
            <el-button slot="reference" type="text" style="margin-right:10px" size="small">{{ scope.row.state === '1' ? '启用' : '关闭' }}</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="pagination.total" :page-size="pagination.pageSize" @current-change="changeHandler" />
    <el-dialog :title="dialogFormTitle" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="formData" label-width="120px" width="700px">
        <el-form-item label="类型">
          <el-select v-model="formData.type" filterable>
            <el-option label="全部" value="" />
            <el-option label="求职招聘" :value="1" />
            <el-option label="婚恋交友" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="图片：" prop="pic">
          <upload v-model="formData.pic" tips="建议尺寸:750*320" />
        </el-form-item>
        <el-form-item label="URL：" prop="url">
          <el-input v-model="formData.url" placeholder="请输入URL" />
        </el-form-item>
        <el-form-item label="排序：" prop="sortv">
          <el-input-number
            v-model="formData.sortv"
            placeholder="数字越大越靠前"
            :min="0"
            :precision="0"
          />
          <span style="padding-left: 10px; color: #969696;">数字越大越靠前</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="surebtn">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { GetList, addedit, statedit } from '../../api/recruit'
import Upload from '../../components/Upload'
export default {
  name: 'Mes',
  components: { Upload },
  data() {
    return {
      queryData: {
        type: '',
        title: '',
        state: ''
      },
      preview: '',
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      },
      dialogFormTitle: '',
      formData: {
        type: '',
        title: '',
        pic: '',
        url: '',
        sortv: 0
      },
      tableLoading: false,
      submitLoading: false,
      dialogFormVisible: false
    }
  },
  created() {
    // this.rela = localStorage.getItem('drole')
    this._getTableData()
  },
  methods: {
    changeHandler(current) {
      this.pagination.currentPage = current
      this._getTableData()
    },
    queryHandler() {
      this.pagination.currentPage = 1
      this._getTableData()
    },
    // 修改状态
    _getTableData() {
      const { pagination, queryData } = this
      const { type, title, state } = queryData
      this.tableLoading = true
      GetList(pagination.currentPage, type, title, state).then(res => {
        const { list = [], pagination } = res || {}
        this.tableData = list
        pagination && (this.pagination = pagination)
      }).finally(() => {
        this.tableLoading = false
      })
    },
    addHandler() {
      this.dialogFormTitle = '新增'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.resetForm()
      })
    },
    resetForm() {
      delete this.formData.id
      this.$refs.form.resetFields()
    },
    surebtn() {
      const { formData } = this
      this.submitLoading = true
      addedit({ ...formData }).then(res => {
        this.dialogFormVisible = false
        this._getTableData()
      }).finally(() => {
        this.submitLoading = false
      })
    },
    // 编辑
    editHandler(row) {
      this.dialogFormTitle = '编辑'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.formData = { ...row }
      })
    },
    toggleHandler(row) {
      const data = Object.assign({}, row)
      data.state = Math.pow(0, row.state)
      this.formData = data
      this._stateClassifyList()
    },
    // 修改状态
    _stateClassifyList() {
      const { formData } = this
      this.submitLoading = true
      statedit({ ...formData }).then(res => {
        this.dialogFormVisible = false
        this._getTableData()
      }).finally(() => {
        this.submitLoading = false
      })
    }
  }
}
</script>
<style>
.el-upload--picture-card {
    box-sizing: border-box;
    width: 80px !important;
    height: 80px !important;
    line-height: 79px !important;
}
.el-upload-list--picture-card .el-upload-list__item {
    width:80px;
    height: 80px;
    margin: 0 8px 8px 0;
}
</style>
